<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script type="text/javascript">
			document.write('<script src="../../js/fix.js?rd=?rd=' + Math.random() + '"><\/script>');
		</script>
		<script type="text/javascript">
			link('../../css/mui.indexedlist.css');
		</script>
		<style>
			html,
			body {
				height: 100%;
				overflow: hidden;
			}
			.mui-bar {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			.searchinfo {
				width: 100%;
				height: 50px;
				background-color: #fff;
				display: flex;
				align-items: center;	
				justify-content: center;
			}
			.mui-content .mui-indexed-list-search{
				width: 90%;
				height: 23px;
				border-radius: 22px;
				border: 0;
				display: flex;
				align-items: center;
				color: #a6bfcd; 
				z-index: 0;
			}
			.mui-content .mui-indexed-list-search .mui-placeholder,
			.mui-content .mui-indexed-list-search .mui-icon-search {
				color: #a6bfcd; 
			}
			.mui-search .mui-placeholder {
				height: 23px;
				line-height: 22px;
			}
			.mui-input-row.mui-search .mui-icon-speech {
				top:-1px;
			}
			.mui-input-row.mui-search .mui-icon-clear {
				top: 2px;
				right: -4px;
			}
			.mui-indexed-list-search input {
				background-color: #e9f0f4;
				color: #a6bfcd; 
			}
				
				
			.mui-content .mui-indexed-list-bar {
				background-color: #fff;
				margin-top: 15px;
			}
			.mui-content .mui-indexed-list-bar a {
				color: #47BAFE;
				font-weight: 700;
			}
			.mui-content .mui-indexed-list-inner .mui-indexed-list-item{
				margin-left: 14px;
			}
			.mui-content .mui-indexed-list-inner .mui-table-view .mui-indexed-list-group {
				width: 100%;
				height: 15px;
				border: 0;
				background-color: #e9f0f4;
				font-size: 16px;
				line-height: 10px;
				color: #000000;
				padding-left: 20px;
			}
			.mui-content .mui-indexed-list-inner .mui-table-view .mui-table-view-divider:before,
			.mui-content .mui-indexed-list-inner .mui-table-view .mui-table-view-divider:after {
				background: none;
			}
			.mui-content .mui-indexed-list-inner ul li{
				margin: 0 15px;
				padding: 0;
				height: 50px;
			}
			.mui-content .mui-indexed-list-inner ul li:last-child{
				border: none;
			}
			.mui-content .mui-indexed-list-inner ul li .mui-checkbox input{
				position: absolute;
				top:14px;
				left: 2px;
			}
			.mui-content .mui-indexed-list-inner ul li .mui-input-row{
				 display: flex;
				 color: #fff;

			}
			.mui-content .mui-indexed-list-inner ul li .mui-input-row .mui-switch{
				 margin-top: 12px;
				 width: 85px;
				 height: 25px;
				 border: 0;
				 background-color: lightsteelblue;
			}
			.mui-content .mui-indexed-list-inner ul li .mui-switch-blue.mui-active{
				background-color: #47BAFE;
			}
			.mui-content .mui-indexed-list-inner ul li .mui-input-row .mui-active:before {
				content: '曾购买' !important;
				left: 2px;
				top: 2px;
				font-size: 12px;
			}
			.mui-content .mui-indexed-list-inner ul li .mui-input-row .mui-switch:before {
				top: 2px;
				right: 5px;
				font-size: 12px;
				content: '未购买';
				color: #fff;
			}
			.mui-content .mui-indexed-list-inner .mui-input-row .mui-switch .mui-switch-handle{
				width: 23px;
				height: 23px;
				border: 0;
				left: 1px;
				top: 1px;
			}
			 .mui-content .mui-indexed-list-inner .mui-input-row label {
				 padding-left: 30px;
				 padding-top: 8px;
				 display: flex;	
			 }
			.mui-content .mui-indexed-list-inner .mui-input-row label .mui-media-object{
				margin:0 15px 0 10px;
				border-radius: 17px;
				width: 34px;
				height: 34px;
			}
			.mui-content .mui-indexed-list-inner .mui-input-row label .mui-media-body{
				font-size: 15px;
				color: #000000;
				height: 40px;
			}
			.mui-content .mui-indexed-list-inner .mui-input-row label .mui-media-body p{
				margin-top: 5px;
				font-size: 12px;
				color: #ccc;
			}
			
			footer {
				width: 100%;
				height: 50px;
				position: fixed;
				background-color: #fff;
				bottom: 0;
				z-index: 99;
			}
			footer .mui-input-row.mui-checkbox.mui-left input{
				position: absolute;
			    top: 14px;
				left: 16px;
			}
			footer .mui-input-row span {
				margin-left: 45px;
				font-size: 18px;
			}
			footer button {
				border: 0;
				width: 100px;
				height: 50px;
				float: right;
				border-radius: 25px 0 0 25px;
				background-color: #47BAFE;
				color: #fff;
				font-size: 16px;
			}
			footer span:nth-of-type(1){
				line-height: 50px;
				color: #47BAFE;
				font-size: 16px;
			}
			footer span:nth-of-type(2) {
				color: #ccc;
				float: right;
				line-height: 50px;
				margin-right: 15px;
				font-size: 14px;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">微信导入</h1>
		</header>
		<div class="mui-content">
			<div id='list' class="mui-indexed-list">
				<div class="searchinfo">
					<div class="mui-indexed-list-search mui-input-row mui-search" >
						<input type="search" class="mui-input-clear mui-indexed-list-search-input mui-input-speech" placeholder="搜索">
					</div>
				</div>
				
				<div class="mui-indexed-list-bar" style="height: 550px;">
					<a>A</a>
					<a>B</a>
					<a>C</a>
					<a>D</a>
					<a>E</a>
					<a>F</a>
					<a>G</a>
					<a>H</a>
					<a>I</a>
					<a>J</a>
					<a>K</a>
					<a>L</a>
					<a>M</a>
					<a>N</a>
					<a>O</a>
					<a>P</a>
					<a>Q</a>
					<a>R</a>
					<a>S</a>
					<a>T</a>
					<a>U</a>
					<a>V</a>
					<a>W</a>
					<a>X</a>
					<a>Y</a>
					<a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul class="mui-table-view" id="weiinfo"></ul>
				</div>
			</div>
		</div>
		<footer>
				<div class="mui-input-row mui-checkbox mui-left">
					<span id="all">全选</span>
				  <input name="checkbox2" onclick="doif()" type="checkbox" id="boxid" >
				  <button type="button" id="daobtn">导入</button>
				  <span id="xuanze">已选择 0 人</span>
				</div> 
		</footer>
		
		
		
		
		<script type="text/html" id="weitamplate">
			{{each DATASET as value}}
				<div data-group="{{value.LetterID}}" class="mui-table-view-divider mui-indexed-list-group">{{value.LetterID}}</div>
				{{each value.User as value}}	
						<li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item">
							<div class="mui-input-row mui-checkbox mui-left">
								<label>
									<img class="mui-media-object" src="{{value.img}}" >
									<div class="mui-media-body">
									{{value.WeixinName}}								
									<p class='mui-ellipsis'>微信号:{{value.weixinNumber}}</p>
									</div>
								</label>
								<div class="mui-switch mui-switch-blue">
									<div class="mui-switch-handle"></div>
								</div> 
								<input name="checkbox1" type="checkbox" onclick="doif()">
							</div>	
						</li>
				{{/each}}
			{{/each}}
		</script>	
		
		
		
		
		<script type="text/javascript">
			script("../../js/mui.indexedlist2.js")
		</script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			mui.ready(function() {
				var header = document.querySelector('header.mui-bar');
				var list = document.getElementById('list');
				//calc hieght
				list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
				//create
				window.indexedList = new mui.IndexedList(list);
			});
			
			mui.plusReady(function() {
				// mui.ready(function() {

				requestJsonFile("../../data/weixin.json", {}, function(request) {
					log(request);
					// if(r.SysConstants.ERROR_CODE_KEY == -1) {
					// 	appUI.showTopTip(r.DATASET);
					// 	return;
					// }
					render("#weiinfo", "weitamplate", request);
					mui('.mui-switch').switch();
				})	
			
				var box = document.getElementById("boxid");
				var btn = document.getElementById("daobtn");
				var chek = document.getElementsByName("checkbox1");
				btn.addEventListener("tap", function() {
					openNew("AssociatedUser.html")
				});
				box.addEventListener("keyup", function() {
					if(box.checked == true){
						for(var i=0;i<chek.length;i++){
							chek[i].checked = false
						}
					}else {
						for(var i=0;i<chek.length;i++){
							chek[i].checked = true	
						}
					}		
				});
				
				
				
				
				//搜索框
				// var uls=document.getElementById("weiinfo"); 			
				// var lis = uls.getElementsByTagName("li")
				// var inpt = document.getElementById('inpt');
				// inpt.addEventListener('touchstart',function(){
				// 	var inval = inpt.value;
				// 	for(var i=0;i<lis.length;i++){
				// 		var paraStr = lis[i].innerText;
				// 		console.log(paraStr)
				// 		if(paraStr.indexOf(inval) < 0){
				// 			lis[i].style.display="none";
				// 		}else {
				// 			lis[i].style.display="block";
				// 		}
				// 	}
				// })
				
			})
			//实时更新已选择的复选框
			function doif(){
				var n = 0;
				var chek = document.getElementsByName("checkbox1");
				for(var i = 0;i<chek.length;i++){
					if(chek[i].checked){
						n++;
					}
				}
				document.getElementById("xuanze").innerText = "已选择 "+ n +" 人";	
			}
			
			
			//子复选框有一个没有选中 全选框就没有选中
			// var chek = document.getElementsByName("checkbox1");
			// for(var i=0;i<chek.length;i++){
			// 	chek[i].addEventListener("tap", function() {
			// 		if(!this.checked){
			// 			box.checked = false 
			// 		}
			// 	})
			// }
			
			
		</script>
	</body>

</html>